<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show Students</title>
    <style>
        table {
            margin:  30px auto;
        }
        td {
            text-align: center;
        }
    </style>
</head>
<body>
<!--写一个按钮,只要用户一点,就在表格中显示学生信息
    表格中的字段有:
    id
    name
    age
    addr
-->
<script>
    window.onload = function (){
        document.getElementById("Btn").onclick =function (){
            // 点击事件发生之后,就向服务器端发送请求,接收服务器端的中数据库中的JSON格式的字符串
            let xml  = new XMLHttpRequest();
            xml.onreadystatechange = function (){
                if(xml.readyState ==4){
                    if(xml.status ==200){
                        // 200 就正常行动,接收服务器端的响应
                        // 接收服务器返回的json格式的字符串,接着拼串即可
                        let html = ''; // 此串用于拼接表格
                        let JsonObj = JSON.parse(xml.responseText);
                        console.log(xml.responseText);
                        for (let i = 0; i < JsonObj.length; i++) {
                            console.log(JsonObj[i]);
                            // 获取每一个json对象的id,name,age,addr属性
                            let id = JsonObj[i].id;
                            let name = JsonObj[i].name;
                            let age = JsonObj[i].age;
                            let addr = JsonObj[i].addr;
                            // html+="<tr>"
                            // html+="    <td>"+(i+1)+"</td>"
                            // html+="    <td>"+name+"</td>"
                            // html+="    <td>"+age+"</td>"
                            // html+="    <td>"+addr+"</td>"
                            // html+="</tr>"
                            html+="<tr><td>"+(i+1)+"</td><td>"+name+"</td> <td>"+age+"</td><td>"+addr+"</td> </tr>"
                        }
                        document.getElementById("stutbody").innerHTML = html;
                    }else {
                        alert(xml.status)
                    }
                }
            }
            xml.open("GET","/JsonTest/test01",true);
            xml.send();
        }
    }
</script>
<input type="button" value="点我显示学生列表" id="Btn">
<table border="1px solid red" width="50%" align="center" cellpadding="0" cellspacing="0" text-align="center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>住址</th>
    </tr>
    <tbody id="stutbody">
<!--    <tr>-->
<!--        <td>1</td>-->
<!--        <td>张山</td>-->
<!--        <td>14</td>-->
<!--        <td>北京</td>-->
<!--    </tr>-->
    </tbody>
</table>
</body>
</html>